<template>
  <div>
    <el-input v-model="a" style="width: 40%" placeholder="请输入姓名，手机号"/>
    <el-button @click="info()">查询</el-button><br>
    <el-button @click="ad=true">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-if="false"  fixed  prop="id" ></el-table-column>
      <el-table-column  fixed  prop="yhm" label="用户名"  ></el-table-column>
      <el-table-column
        prop="managementname"
        label="真实姓名">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>    
      <el-table-column
        prop="role"
        label="角色">
      </el-table-column>    
      <el-table-column
        prop="jkph"
        label="手机号码">
      </el-table-column>  
      <el-table-column
        prop="yx"
        label="邮箱">
      </el-table-column>
       <el-table-column
        prop="createtime"
        label="添加时间" >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="upid(scope.row.id),up=true">修改</el-button>
        <el-button @click="delet(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <!--分页组件-->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2, 4, ]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
       <!--拟态框-->
       <el-dialog title="新增" :visible.sync="ad">
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
      <el-form :model="management">
     <el-form-item label="用户名" >
      <el-input  autocomplete="off" v-model="management.yhm"/>
    </el-form-item>
  <el-form-item label="真实姓名" >
      <el-input autocomplete="off" v-model="management.managementname"/>
    </el-form-item>
     <el-form-item label="角色" >
      <el-input  autocomplete="off" v-model="management.role"/>
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input  autocomplete="off" v-model="management.jkph"/>
    </el-form-item>
<el-form-item label="邮箱" >
      <el-input  autocomplete="off" v-model="management.yx"/>
    </el-form-item>
       <el-form-item label="是否启用" >
      <el-radio label="1" >是</el-radio>
        <el-radio label="0">否</el-radio>
</el-form-item>
   </el-form>
</el-tab-pane>
  </el-tabs>
  <el-button @click="isok()">确定</el-button>
  </el-dialog>
     <!--修改拟态框-->
     <el-dialog title="修改" :visible.sync="up">
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
      <el-form :model="management">
        <el-form-item label="联系电话">
      <el-input  autocomplete="off" v-model="management.jkph"/>
    </el-form-item>
<el-form-item label="真实姓名" >
      <el-input autocomplete="off" v-model="management.managementname"/>
    </el-form-item>
 <el-form-item label="角色" >
      <el-input  autocomplete="off" v-model="management.role"/>
    </el-form-item>
  <el-form-item label="用户名" >
      <el-input  autocomplete="off" v-model="management.yhm"/>
    </el-form-item>
<el-form-item label="邮箱" >
      <el-input  autocomplete="off" v-model="management.yx"/>
    </el-form-item>
   </el-form>
</el-tab-pane>
  </el-tabs>
  <el-button @click="upda()">确定</el-button>
  </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData:[],
      ad:false,
      up:false,
        activeName: 'first',
        formLabelWidth:20,
      a:"",
       //每页条数
       pageSize:2,
        //总页数
        total:50,
        //当前页
        currentPage4: 1,

        management:{
          id:"",
          yhm:"",
          managementname:"",
          role:"",
          jkph:"",
          yx:"",
          createtime:""
        }
    }
  },
  methods:{
    handleClick(tab, event) {
      },
    cx(){
      this.axios.post("/tomcat/manuse",{managementname:""}).then(data=>{
        console.log(data.data)
        this.tableData=data.data
      })
    },
    //分页方法
    handleSizeChange(val) {
        this.pageSize=val;
        this.info()

      },
      handleCurrentChange(val) {
        this.currentPage4=val;
        this.info()
      },
    info(){
        this.axios.post("/tomcat/pageman",{page:this.currentPage4,num:this.pageSize,m:{managementname:this.a}}).then(data=>
        {
          this.total= data.data.total
     this.tableData=data.data.rows
    
        })
      },
      isok(){
        this.axios.post("/tomcat/add",{
          yhm:this.management.yhm,managementname:this.management.managementname,role:this.management.role,jkph:this.management.jkph,yx:this.management.yx
           ,yhm:this.management.createtime}).
          then(data=>{
            if(data.data>0){
              alert("添加成功")
              this.info();
            }else{
              alert("添加失败")
              this.info();
            }
          })
      },
      delet(id){
        this.axios.get("/tomcat/delman?id="+id).then(data=>{
          this.id=data.data
          if(data.data>0){
            alert("删除成功")
            this.info();
          }
        })
      },
      
      upid(id){
        this.axios.get("/tomcat/selid?id="+id).then(data=>{
          this.management=data.data
        })
      },
      upda(){
        this.axios.post("/tomcat/upda"
        ,{id:this.management.id,yhm:this.management.yhm,managementname:this.management.managementname,role:this.management.role,jkph:this.management.jkph,yx:this.management.yx})
      .then(data=>{
        if(data.data>0){
          alert("修改成功")
          this.info()
        }else{
          alert("修改失败")
          this.upda()
        }
      })
      }
  },
  created () {
    this.info();
  }
}
</script>

<style>

</style>